<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<style>
    [v-cloak] {
        display: none;
    }

    .active {
        width: 100px;
        height: 100px;
    }

    .bg {
        background-color: pink;
    }
</style>

<body>
    <div class="msg">
        <!-- 文本渲染 -->
        <div v-cloak> {{msg1}} </div>
        <!-- 纯文本渲染 -->
        <div v-text='msg1'></div>
        <!-- 带html的格式渲染 -->
        <div v-html='msg2'></div>
        <!-- 显示原始信息，跳过编译的过程 {{msg2}} -->
        <div v-pre>{{msg2}}</div>
        <!-- 双向响应  用户 即 开放人员都可以通过操作修改网页内的数据-->
        <input type="text" v-model='msg1'>
        <div v-text='num'></div>
        <!-- vue的函数事件 -->
        <button v-on:click='sum2(111,222,$event)'>我点你</button>
        <button @click='sum1'>我还点你</button>
        <!-- 阻止冒泡 -->
        <!-- 方法一  阻止事件冒泡-->
        <div v-on:click='sum1'>
            <button v-on:click.stop='fn1'>冒泡1</button>
        </div>
        <!-- 方法二  只有点击此事件所在元素，事件才会触发-->
        <div v-on:click.self='sum1'>
            <button v-on:click='fn1'>冒泡2</button>
        </div>
        <!-- 阻止浏览器的默认事件 -->
        <a href="https://www.baidu.com" v-on:click.prevent='fn2'>百度</a><br>
        <!-- 属性绑定指令  v-bind -->
        <a v-bind:href="url">百度</a><br>
        <a :href="url">百度</a><br>
        <!-- 使用v-bind的方法，做到切换属性值 -->
        <button @click='handle'>切换</button>
        <!-- v-modle的底层原理       v-modle = v-bind + v-on:input -->
        <div>{{msg1}}</div>
        <input type="text" :value='msg1' @input='handle1'>
        <input type="text" v-model='msg1'>
        <!-- vue中class样式的绑定 -->
        <!-- 数组形式 -->
        <div :class='[activeClass,bgClass]'>1111</div>
        <!-- 对象形式 -->
        <div :class='{active : isactive ,bg : isbgc}'>2222</div>
        <!-- 数组简写 -->
        <div :class='arrClass'>3333</div>
        <!-- 对象简写 -->
        <div :class='objClass'>4444</div>
        <!-- Vue中style样式的绑定,     样式绑定时 ： 语法为键值对的形式 -->
        <div :style='objStyles'>5555</div>
        <!-- Vue分支结构 -->
        <p v-if='age < 12'>小学</p>
        <p v-else-if='age >=12 && age <18'>中学</p>
        <p v-else>大学</p>
        <!-- vue循环v-for -->
        <h1 v-for='(item,index) in arr2' :key='index' v-if='item.name === "张三"'> {{item.name}}</h1>
    </div>
    <script>
        new Vue({

            el: '.msg',
            data: {
                arr2: [{
                    id: 1,
                    name: '张三',
                    age: 20
                }, {
                    id: 2,
                    name: '李四',
                    age: 20
                }, {
                    id: 3,
                    name: '张三',
                    age: 20
                },],
                age: 12,
                msg1: 'hello Vue!',
                msg2: '<h1> nihao </h1>',
                num: 1,
                url: 'https://www.baidu.com',
                activeClass: 'active',
                bgClass: 'bg',
                isbgc: true,
                isactive: true,
                objStyles: {
                    width: '100px',
                    height: '100px',
                    backgroundColor: 'pink'
                },
                objClass: {
                    active: true,
                    bg: true,
                },
                arrClass: [
                    activeClass = 'active',
                    bgClass = 'bg',
                ]
            },
            methods: {
                sum1: function (event) {
                    console.log(event.target.innerHTML)
                    this.num++
                },
                sum2: function (e1, e2, event) {
                    console.log(event.target.innerHTML)
                    this.num++
                },
                fn1: function () {

                },
                fn2: function (event) {

                },
                handle() {
                    this.url = 'https://www.taobao.com'
                },
                handle1(e) {
                    this.msg1 = e.target.value
                }
            }
        })
    </script>
</body>

</html>